import React, { Component } from 'react';
import { NavLink, Redirect, Route, Switch, useLocation, useParams } from 'react-router-dom';

const Home = () => {
    // const { state: { name } } = useLocation()
    const { state } = useLocation();

    return (
        <div>
            <h2>Home</h2>
            query: {state && state.name}
        </div>
    );
};

const About = () => {
    const { id } = useParams();
    return (
        <div>
            <h2>About</h2>
            params: {id}
        </div>
    );
};

const Search = () => {
    const { search } = useLocation();
    const query = new URLSearchParams(search).get('id');
    return (
        <div>
            <h2>Search</h2>
            query: {query}
        </div>
    );
};

const Page404 = () => (
    <div>page 404</div>
);

class App extends Component {
    render () {
        return (
            <div>
                <ul>
                    <li><NavLink to={{ pathname: '/home', state: { name: 12 } }}>Home</NavLink></li>
                    <li><NavLink to="/about/sdsds">About</NavLink></li>
                    <li><NavLink to="/search?id=14">Search</NavLink></li>
                </ul>
                <Switch>
                    <Route path="/home">
                        <Home></Home>
                    </Route>
                    <Route path="/about/:id">
                        <About></About>
                    </Route>
                    <Route path="/search">
                        <Search></Search>
                    </Route>
                    <Redirect from="/" to="/home" exact></Redirect>
                    <Route path="*">
                        <Page404 />
                    </Route>
                </Switch>
            </div>
        );
    }
}

export default App;
